<template>
  <div class="crud-opts">
    <span class="crud-flex">
      <!--左侧插槽-->
      <slot name="left"/>
      <img class="img" src="@images/update.png" alt="" @click="doReply()">
      <el-button class="btn-height reduction" icon="el-icon-refresh-left" :disabled="crud.selections.length !== 1"
                 v-permission="permission.reduction==undefined ? ['']:permission.reduction"
                 @click="reduction(crud.selections)"></el-button>
      <el-popover placement="bottom-end" width="150" trigger="click" style="height:30px">
        <img class="img" slot="reference" src="@images/gezi.png" alt="">
        <el-checkbox v-model="allColumnsSelected" :indeterminate="allColumnsSelectedIndeterminate"
                     @change="handleCheckAllChange">
          全选
        </el-checkbox>
        <el-checkbox v-for="item in crud.props.tableColumns" :key="item.label" v-model="item.visible"
                     @change="handleCheckedTableColumnsChange(item)">
          {{ item.label }}
        </el-checkbox>
      </el-popover>
      <el-button-group v-if="crud.queryList.length > 0" style="height:30px">
        <!--查询按钮-->
        <img class="img" src="@images/search.png" @click="toggleSearch()"
             v-if="crud.props.searchToggle"
             alt="">
        <div style="display: inline-block;display:flex;align:center" class="select">
      <img class="img" style="margin-right:0px !important" v-if="!crud.props.searchToggle"
           src="@images/hidden.png" alt="" @click="toggleSearch()">
          <el-input placeholder="请输入内容" v-model="qryParam" style="width: 400px;" class="input-with-select"
                    @change="paramChange"
                    v-if="!crud.props.searchToggle" clearable>
            <el-select v-model="qryCloum" @change="cloumChange" slot="prepend" placeholder="请选择" filterable
                       style="width: 100px">
              <el-option v-for="(item,i) in crud.queryList" :key="i" :label="item.cloumName"
                         :value="item.cloumValue"></el-option>
            </el-select>
          </el-input>
          <img class="img" v-if="!crud.props.searchToggle" slot="append" src="@images/search.png"
               alt=""
               @click="doQuery">
        </div>
      </el-button-group>
      <!--右侧-->
      <slot name="right"/>
    </span>
    <el-button-group class="crud-opts-right">
      <el-pagination :page-size.sync="page.size" :total="page.total" :current-page.sync="page.page" :pager-count="3"
                     prev-text=" " next-text=" "
                     style="margin-top: 8px;" layout="prev, pager, next,sizes,total"
                     @size-change="crud.sizeChangeHandler($event)"
                     @current-change="crud.pageChangeHandler"/>
    </el-button-group>

  </div>
</template>
<script>
import CRUD, {crud, pagination} from '@crud/crud'
import stream from '@/api/stream/stream'

export default {
  mixins: [crud(), pagination()],
  props: {
    permission: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      allColumnsSelected: true,
      allColumnsSelectedIndeterminate: false,
      qryParam: '',
      qryCloum: '',
      reductionVisi: false,
      reductionForm: {
        isReduction: '1'
      },
      paramReq: {
        isReduction: '1',
        pkId: '',
        bitchId: ''
      }
    }
  },
  created() {
    this.crud.updateProp('searchToggle', true)
  },
  methods: {
    handleCheckAllChange(val) {
      if (val === false) {
        this.$message({
          message: '请至少选择一列',
          type: 'warning'
        });
        this.allColumnsSelected = true
        return
      }
      for (const key in this.crud.props.tableColumns) {
        this.crud.props.tableColumns[key].visible = val
      }
      this.allColumnsSelected = val
      this.allColumnsSelectedIndeterminate = false
    },
    handleCheckedTableColumnsChange(item) {
      let totalCount = 0
      let selectedCount = 0
      for (const key in this.crud.props.tableColumns) {
        ++totalCount
        selectedCount += this.crud.props.tableColumns[key].visible ? 1 : 0
      }
      if (selectedCount === 0) {
        this.crud.notify('请至少选择一列', CRUD.NOTIFICATION_TYPE.WARNING)
        this.$nextTick(function () {
          item.visible = true
        })
        return
      }
      this.allColumnsSelected = selectedCount === totalCount
      this.allColumnsSelectedIndeterminate = selectedCount !== totalCount && selectedCount !== 0
    },
    toggleSearch() {
      this.crud.props.searchToggle = !this.crud.props.searchToggle
      if (this.crud.props.searchToggle) {
        delete this.crud.query[this.qryCloum];
      }
    },
    paramChange(value) {
      this.qryParam = value;
    },
    cloumChange(value) {
      this.qryCloum = value;
      for (let key in this.crud.query) {
        if (key != this.qryCloum) {
          delete this.crud.query[key]
        }
      }
    },
    doReply() {
      this.crud.findVM('presenter').$refs['table'].clearFilter()
      this.crud.query = {}
      this.qryParam = ''
      this.qryCloum = ''
      this.crud.page.page = 1
      this.crud.params = {}
      this.crud.toQuery()
    },
    doQuery() {
      var key = "";
      var value = "";
      if (this.qryCloum == null || this.qryCloum == '') {
        this.$message({
          message: '请先选择搜索项',
          type: 'warning'
        });
        return;
      }
      if (this.qryCloum != null && this.qryCloum != '') {
        key = this.qryCloum;
      }
      if (this.qryParam != '' && this.qryParam != null) {
        value = this.qryParam;
      }
      this.crud.query[key] = value;
      this.crud.toQuery();
    },
    reduction(datas) {
      this.$confirm(`确认还原这条数据?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var param = {
          "bitchId": datas[0].bitchId,
          "bitchType": datas[0].bitchType
        }
        stream.reduction(param)
          .then(() => {
            this.$notify({
              title: '成功',
              message: '数据还原成功',
              type: 'success'
            });
            this.crud.toQuery();
          })
          .catch(() => {
            this.$notify.error({
              title: '错误',
              message: '数据还原异常',
              type: 'error'
            });
          });
      }).catch(() => {
      })
    }
  }
}
</script>

<style>
.crud-opts {
  padding: 6px 0;
  display: -webkit-flex;
  display: flex;
  align-items: center;
}

.crud-opts .crud-opts-right {
  margin-left: auto;
}

.reduction{
  border-radius: 0px;
  border-color: rgb(168, 198, 242) !important;
  color: rgb(69, 136, 228) !important;
  margin-right: 10px;
  width: 32px;
  background: rgb(246, 249, 254) !important;
}

.reduction .el-icon-refresh-left{
  font-size: 25px;
  position: relative;
  right: 12px;
  bottom: 5px;
}

</style>
